<template>
  <div id="app">
    <!-- 头部 -->
    <mt-header fixed title="信息管理系统">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>

    <!-- 内容 -->
    <router-view></router-view>

    <div class="tabbar">
      <ul>
        <li v-for="(item,index) in tabs" :key="item.id">
          <router-link :to="item.routerName" exact >
            <img :src="item.imgSrc" alt="">
            <p>{{ item.title }}</p>
          </router-link>
        </li>
      </ul>
    </div>

    <!-- <mt-tabbar fixed v-model="selected">
      <mt-tab-item id="home">
        <img slot="icon" src="./assets/img/home.png">
        首页
      </mt-tab-item>
      <mt-tab-item id="vip">
        <img slot="icon" src="./assets/img/vip.png">
        会员
      </mt-tab-item>
      <mt-tab-item id="cart">
        <img slot="icon" src="./assets/img/cart.png">
        购物车
      </mt-tab-item>
      <mt-tab-item id="search">
        <img slot="icon" src="./assets/img/search.png">
        搜索
      </mt-tab-item>
    </mt-tabbar> -->

    <!-- 底部 -->
  </div>
</template>

<script>
import home from './assets/img/home.png'
import vip from './assets/img/vip.png'
import cart from './assets/img/cart.png'
import search from './assets/img/search.png'

let tabs = [
  {id:1, title: "首页", imgSrc: home, routerName:{name:"home"}},
  {id:2, title: "会员", imgSrc: vip, routerName:{name:"vip"}},
  {id:3, title: "购物车", imgSrc: cart, routerName:{name:"cart"}},
  {id:4, title: "搜索", imgSrc: search, routerName:{name:"search"}},
]

  export default {
    name: 'App',
    data() {
      return {
        selected: '',
        tabs: tabs,
        currentIndex: 0
      }
    },
    methods:{
      changHash(index){
        this.currentIndex = index
      }
    },
    // 监听
    watch: {
      // 编程实导航
      selected(newV, oldV) {
        // newV:当前选的值，oldV:上一个选择的值
        // 使用命名路由
        this.$router.push({
          name: this.selected
        })
      }
    },
    methods: {

    },
    // 组件创建后调用
    created() {

    }
  }
</script>

<style>
  .tabbar{
    width: 100%;
    height: 55px;
    background-color: #cccccc;
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(180deg,#d9d9d9, #d9d9d9 50%,tansparent 50%);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: top left;
    background-color: #fafafa;
  }
  .tabbar ul {
    width: 100%;
    overflow: hidden;
  }
  .tabbar ul li{
    float: left;
    width: 25%;
    height: 55px;
    text-align: center;
  }
  .tabbar ul li a {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding-top: 10px;
  }
  .tabbar ul li a.link-active {
    background-color: greenyellow;
  }
  .tabbar ul li p {
    font-size: 12px;
  }
  .tabbar ul li a img{
    width: 25px;
  }
</style>
